/// 分类分组数据通用对话框
/// 数据结构如下
// categories:[{},{},...]
// 
/// 一组分类数据对象如下
// {
//     catname:"分类名称",
//     datas:[
//         /// 一个data是一个单元格
//         {
//             ...
//         },
//         ...
//     ]
// }



import React , {useState,useEffect} from 'react'
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';




import "./DialogGeneralCategoriesData.css" ;

/// props.dialogTitle : String
/// props.categories : [{...} , {...} , ...]
/// props.onCancelCallback()
/// props.onOkCallback( catindex , dataindex )
/// props.dataCellRender( catindex, dataindex, celldata )
/// props.dataCellHeaderRender( catindex )


function DialogGeneralCategoriesData( props ) {

    const [currentCatIndex, setCurrentCatIndex] = useState(0) ;
    const [currentDataIndex, setCurrentDataIndex] = useState(-1) ;


    //categories 更细以后重置当前dataindex
    useEffect(() => {
        setCurrentDataIndex(-1);
    }, [props.categories]);
    


    const onOkButtonClickedCallback = function () {
        props.onOkCallback( currentCatIndex , currentDataIndex  ) ;
    }

    const onCatCellClickedCallback = function( catindex ) {
        if( catindex !== currentCatIndex ){
            setCurrentCatIndex(catindex) ;
            setCurrentDataIndex( -1 ) ;
        }
    }

    const onDataCellClickedCallback = function( dataindex ){
        if( dataindex !== currentDataIndex ){
            setCurrentDataIndex( dataindex ) ;
        }
    }

    const checkBackgroundImageStyle = {
        backgroundImage: "url(/images/check.png)",
        backgroundRepeat:"no-repeat",
        backgroundPosition:"center right 9px"
    } ;

    return (
        <Modal
        size="lg"
        show={props.isOpen}
        dialogClassName="rsbig-modal"
        contentClassName="rsbig-modal-content"
            >
            <div><span className='DialogGeneralCategoriesDataTitleSlash'></span>{props.dialogTitle}</div>
            <div className="DialogGeneralCategoriesDataSearchContainer">

            </div>

            <div  className="DialogGeneralCategoriesDataContent">
                <div className="DialogGeneralCategoriesDataCatContainer">
                    {
                        ( typeof(props.categories) !=='undefined')?
                        props.categories.map( (cat,index) => (
                                <div
                                key={'key'+index}
                                dataid={index}
                                className={(index===currentCatIndex)?'DialogGeneralCategoriesDataCatCell Active':'DialogGeneralCategoriesDataCatCell'} 
                                onClick={()=>onCatCellClickedCallback(index)}>{cat.catname}</div>
                            )
                        ) :
                        ("")
                    }
                </div>
                <div className="DialogGeneralCategoriesDataDataContainer">
                    {
                        // 顶部按钮位置
                        ( typeof(props.dataCellHeaderRender) !== 'undefined')?props.dataCellHeaderRender(currentCatIndex):''
                    }

                    {
                        ( typeof(props.categories) !== 'undefined' )?
                        (
                            (props.categories[currentCatIndex]!==undefined)?(
                                props.categories[currentCatIndex].datas.map( (data1,index) => (
                                    <div key={'key2-'+index}  
                                    dataid={index} 
                                    onClick={()=>onDataCellClickedCallback(index)}
                                    className={(index===currentDataIndex)?'DialogGeneralCategoriesDataDataCell Active':'DialogGeneralCategoriesDataDataCell'} 
                                    style={(index===currentDataIndex)?checkBackgroundImageStyle:{}}>
    
                                        {/* 动态渲染单元格 */}
                                        {props.dataCellRender(currentCatIndex,index,data1)}
                                        
                                    </div>
                                ))
                            ):""
                        ):""
                        
                    }
                    

                </div>
            </div>            
            
            <div className="DialogGeneralCategoriesDataFooter">
                <Button 
                className='rsbig-button'
                style={{float:'left'}} variant="secondary" size="sm" >帮助</Button>
                <Button 
                className='rsbig-button'
                style={{float:'right'}} variant="secondary"
                size="sm"
                onClick={props.onCancelCallback} >取消</Button>
                <Button 
                className='rsbig-button'
                size="sm"
                variant="primary" 
                style={{backgroundColor:'rgb(53, 151, 209)', float: 'right',marginRight:'10px'}}
                onClick={onOkButtonClickedCallback}>确定
                </Button>
                <div style={{clear:'both'}}></div>
            </div>
        </Modal>
    )
}

export default DialogGeneralCategoriesData
